<template>
   <div class="page sdcg-page" data-page="manualZhagang" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link" @click="$root.backToTab()">
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="link-page-top">
        <div class="link-page-title">查岗</div>
    </div>
    <div class="page-content sdcg-page-content" style="height: calc(100vh - 90px);">
        <div class="sdcg-page-title">
            <p>选择查岗人员</p>
            <p class="sub">以下是当前值班人员</p>
        </div> 
        <div class="sdcg-page-personnel" id="PersonOnDuty">
        </div>
        <div class="sdcg-page-title" style="margin-bottom: 0;">
            <p>选择应答时间</p>
            <p class="sub">分钟</p>
        </div> 
        <div class="inspection-time-m-select">
            <div id="demo-picker-date-container"></div>
        </div> 
        <div class="ins-btn" style="margin-bottom: 20px;" @click="BtnClick" >开始查岗</div>
    </div>
</template>

<script>
    return {
        data: function () {
            return {
                pickerValue:"",
                insTimeArr:[],
                addedPList:[]
            }
        },
        methods: {
            //值班人员
            getPersonOnDuty: function () {
                var self = this;
                var $ = self.$;
                $("#PersonOnDuty").empty();
                Dao.getCurrentPersonnelOnDutytext({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    orgId: userInfor.org.id,
                }, function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            $("#PersonOnDuty").append(`<span id="manualCheckP-` + data[i].id + `" data-id="`+data[i].id+`" data-account="` + data[i].watchAccount + `">` + common.transNullundefined(data[i].watchAccountName) + `</span>`);
                        }
                        $("#PersonOnDuty span").click(function(e){
                            var id = $(this).attr("data-id");                        
                            var watchAccount = $(this).attr("data-account"); 
                            var obj = {
                                id:id,
                                account:watchAccount
                            };
                            if(this.className.indexOf("on") > -1){
                                $("#manualCheckP-"+id).removeClass("on");
                                for(var j=0;j<self.addedPList.length;j++){
                                    if(self.addedPList[j].id == id){
                                        self.addedPList.splice(j,1);
                                        break;
                                    }
                                }
                            }else{
                                $("#manualCheckP-"+id).addClass("on");
                                self.addedPList.push(obj);
                            }
                        });
                    }else{
                        $("#PersonOnDuty").html("无人值班");
                    }
                });
            },
            //查岗时间
            getzhagangTime: function () {
                var self = this;
                var $ = self.$;
                Dao.zhagangTime({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    code: 20,
                }, function (data) {
                    var time_val=data.dictValueObj;
                    for (var i = 0; i < time_val.length; i++) {
                        self.insTimeArr.push(time_val[i].dictValue);
                    }
                    self.initInsPiker();
                });
            },
            //初始化picker
            initInsPiker:function(){
                var self = this;
                var $ = self.$;
                var pickerDevice = app.picker.create({
                    containerEl: '#demo-picker-date-container',
                    toolbar: false,
                    rotateEffect: true,
                    value:[self.insTimeArr[2]],
                    cols: [
                        {
                            textAlign: 'center',
                            values: self.insTimeArr
                        }
                    ],
                    on: {
                        change: function (picker, values, displayValues) {
                            self.pickerValue = values[0].split("分钟")[0];
                        },
                    }
                });
            },
            //开始查岗
            BtnClick: function () {
                var self = this;
                var $ = self.$;
                if(self.addedPList.length == 0){
                    app.methods.showToastCenter('请选择查岗人员');
                    return;
                }
                if (self.pickerValue == ""){
                    app.methods.showToastCenter('请选择应答时间');
                    return;
                };
                common.loading(1);
                Dao.addTask({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    organizationId: userInfor.org.id,
                    taskName: moment().format("YYYYMMDD")+"手动查岗",
                    replyTime: self.pickerValue,
                    watchDetails: JSON.stringify(self.addedPList),
                    
                }, function (data) {
                    common.loading(0);
                    app.methods.showToastCenter("任务提交成功");
                    app.router.back();
                    app.view.current.el.f7View.router.currentPageEl.f7Component.getRecordData();
                });
            },
    },
    on: {
        pageAfterIn: function (e, page) {
            var self = this;
            var app = self.$app;
            var $ = self.$;
            self.getPersonOnDuty();
            self.getzhagangTime();

        }
    }
}
</script>

<style>
    .inspection-time-m-select .picker-columns{
        height: 100%;
    }
</style>
